<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>时钟翻牌器</title>
  <link rel="stylesheet" href="block.css">
</head>

<body>
  <div class="clock" id="clock">
    <div class="flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <div class="flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <em>:</em>
    <div class="flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <div class="flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <em>:</em>
    <div class="flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
    <div class="flip down">
      <div class="digital front number0"></div>
      <div class="digital back number1"></div>
    </div>
  </div>
  <script src="block.js"></script>
  <script>
    //正则格式化日期
    function formatDate(date, dateFormat) {
      /* 单独格式化年份，根据y的字符数量输出年份
       * 例如：yyyy => 2019
              yy => 19
              y => 9
       */
      if (/(y+)/.test(dateFormat)) {
        dateFormat = dateFormat.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      // 格式化月、日、时、分、秒
      let o = {
        'm+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'i+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(dateFormat)) {
          // 取出对应的值
          let str = o[k] + '';
          /* 根据设置的格式，输出对应的字符
           * 例如: 早上8时，hh => 08，h => 8
           * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
           * 例如: 下午15时，hh => 15, h => 15
           */
          dateFormat = dateFormat.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        }
      }
      return dateFormat;
    };

    //日期时间补零
    function padLeftZero(str) {
      return ('00' + str).substr(str.length);
    }

    // 定位时钟模块
    let clock = document.getElementById('clock')
    // 定位6个翻板
    let flips = clock.querySelectorAll('.flip')
    // 获取当前时间
    let now = new Date()
    // 格式化当前时间，例如现在是20:30:10，则输出"203010"字符串
    let nowTimeStr = formatDate(now, 'hhiiss')
    // 格式化下一秒的时间
    let nextTimeStr = formatDate(new Date(now.getTime() + 1000), 'hhiiss')
    // 定义牌板数组，用来存储6个Flipper翻板对象
    let flipObjs = []
    for (let i = 0; i < flips.length; i++) {
      // 创建6个Flipper实例，初始化并存入flipObjs
      flipObjs.push(new Flipper({
        // 每个Flipper实例按数组顺序与翻板DOM的顺序一一对应
        node: flips[i],
        // 按数组顺序取时间字符串对应位置的数字
        frontText: 'number' + nowTimeStr[i],
        backText: 'number' + nextTimeStr[i]
      }))
    }
    setInterval(function () {
      // 获取当前时间
      let now = new Date()
      // 格式化当前时间
      let nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'hhiiss')
      // 格式化下一秒时间
      let nextTimeStr = formatDate(now, 'hhiiss')
      // 将当前时间和下一秒时间逐位对比
      for (let i = 0; i < flipObjs.length; i++) {
        // 如果前后数字没有变化，则直接跳过，不翻牌
        if (nowTimeStr[i] === nextTimeStr[i]) {
          continue
        }
        // 传递前后牌的数字，进行向下翻牌动画
        flipObjs[i].flipDown('number' + nowTimeStr[i], 'number' + nextTimeStr[i])
      }
    }, 1000)

  </script>
</body>

</html>